<template>
    <div>
        <CommonTable :columns="columns"
                     :dataList="tableDataList"
                     :labelField="'title'"
                     :rowKey="(row) => row.userId"
                     :actionColData="actionCol"
                     :actionWidth="200"
                     :button-config="buttonConfig"
                     :pagination="tablePagination"
                     :loading="tableLoading"
                     :scroll-x="1000"
                     @onPageChange="onPageChange"
                     @onPageSizeChange="onPageSizeChange"
                     @onEvent="onEvent">
            <template #query>
                <UserQueryForm @onQuery="onQuery" @onReset="onReset"/>
            </template>
        </CommonTable>
        <UserEditForm ref="userEditFormRef"/>
        <n-modal
            v-model:show="messageShow"
            preset="dialog"
            :title="message?.title"
            :content="message?.content"
            positive-text="已读"
            negative-text="关闭"
            @positive-click="readMsg(message?.id)"
            @negative-click="cancle"
        />

    </div>
</template>

<script lang="ts">
import {defineComponent, onMounted, onUnmounted, ref, watch} from "vue";
import CommonTable from "@/components/commonTable/index.vue"
import {columns} from "@/views/pages/system/notice/columns";
import {notificationController}  from "@/api/controller/notificationController";
import UserQueryForm from "@/views/pages/system/notice/userQueryForm.vue";
import {useCommonTable} from "@/components/commonTable/useCommonTable";
import {eventBus} from "@/config/eventBus";

export default defineComponent({
    components: {
        CommonTable, UserQueryForm
    },
    setup() {

        const {
            tableDataList,
            tablePagination,
            tableLoading,
            onPageChange,
            onPageSizeChange,
            getDataList
        } = useCommonTable(notificationController.getNotification)
        const message = ref(null)

        const buttonConfig = {
            addButton: {
                type: "add",
                title: "新增数据",
                actionType: 0,
                show: false,
                colorType: "primary",
            },
            editButton: {
                type: "edit",
                title: "编辑",
                actionType: 1,
                show: false,
                colorType: "primary",
            },
            deleteButton: {
                type: "delete",
                title: "删除",
                actionType: 2,
                show: false,
                colorType: "error",
            },
            batchDeleteButton: {
                type: "batchDelete",
                colorType: "error",
                actionType: 3,
                show: true,
                title: "批量删除",
            }
        }

        const messageShow = ref(false)
        const userEditFormRef = ref(null)
        const userId = ref<number | undefined>(undefined)
        // 操作列
        const actionCol = ref<Array<any>>([

            {
                title: "查看",
                colorType: "info",
                actionType: 4,
            },
            {
                title: "已读",
                colorType: "success",
                actionType: 5,
            },
            {
                title: "未读",
                colorType: "error",
                actionType: 6,
            }
        ])

        // @ts-ignore
        watch(() => userEditFormRef?.value?.modalLoading, () => getDataList(), {deep: true})

        const onEvent = (value: any) => {
            switch (value.type) {

                case 5:
                    // @ts-ignore
                    readMsg(value.row.id)
                    break
                case 6:
                    // @ts-ignore
                    unReadMsg(value.row.id)
                    break
                // 重置密码
                case 4:
                    message.value = value.row
                    messageShow.value = true
                    break
            }
        }


        const cancle = () => {
            messageShow.value = false
        }

        const readMsg = (mesageId:string) => {
             console.log(mesageId+"is read")
            updateStatus(mesageId,1);

        }

        const unReadMsg = (mesageId:string) => {
            console.log(mesageId+"is read")
            updateStatus(mesageId,0);
        }

        const updateStatus = (id:string,status:number)=>{
            notificationController.updateStatus({
                id:id,
                status:status
            }).then(res => {
                window.$message.success(res.msg)
                getDataList()
            }).catch(err => {
                window.$message.error(err.msg)
            })
        }
        const onQuery = (value: any) => {
            getDataList(value)
        }

        const onReset = (value: any) => {
            getDataList(value)
        }


        onMounted(() => {
            getDataList()
        })

        onUnmounted(() => {
            eventBus.off("handleUserStatusSwitchClick",() => {})
        })

        return {
            columns,
            tableDataList,
            tablePagination,
            tableLoading,
            actionCol,
            messageShow,
            cancle,
            readMsg,
            onPageChange,
            onPageSizeChange,
            onEvent,
            userEditFormRef,
            userId,
            buttonConfig,
            message,
            onQuery,
            onReset
        }
    }
})
</script>
